<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style: none;
        }

        #app {
            text-align: center;
            padding-top: 50px;
        }

        .history-users {
            width: 300px;
            height: 500px;
            position: absolute;
            overflow: scroll;
            top: 0;
            left: 0;
            text-align: left;
            left: 50%;
            margin-left: -130px;
            top: 150px;
        }

        .fade-enter-active {
            animation: fade-enter 1s ease;
        }

        @keyframes show-up {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>
</head>

<body>

    <div id="app">

        <h1>{{name}}</h1>

        <button @click="guess"> 猜猜我是谁 </button>

        <div class="history-users">
            <ul>
                <transition-group name="fade">
                    <!-- <li v-for="(u,i) in history" :key="u.name">
                        {{i+1}} 姓名： {{u.name}} 权重：{{u.weight}} 次数：{{u.num}}
                      </li> -->

                    <Item v-for="(u,i) in history" :data="u" :index="i" :key="u.name"></Item>
                </transition-group>

            </ul>
        </div>

    </div>

    <script>
        let students = [{
                name: "党苏伟",
                weight: 5,
                num: 0
            },
            {
                name: "张依新",
                weight: 2,
                num: 0
            },
            {
                name: "刘宏力",
                weight: 5,
                num: 0
            },
            {
                name: "晋忠芳",
                weight: 2,
                num: 0
            },
            {
                name: "高磊",
                weight: 5,
                num: 0
            },
            {
                name: "王业祥",
                weight: 3,
                num: 0
            },
            {
                name: "齐梦瑶",
                weight: 2,
                num: 0
            },
            {
                name: "宫燕子",
                weight: 2,
                num: 0
            },
            {
                name: "王鑫",
                weight: 5,
                num: 0
            },
            {
                name: "葛沁尧",
                weight: 4,
                num: 0
            },
            {
                name: "王力",
                weight: 5,
                num: 0
            },
            {
                name: "张旭",
                weight: 1,
                num: 0
            },
            {
                name: "雷莹",
                weight: 2,
                num: 0
            },
            {
                name: "杨莹",
                weight: 3,
                num: 0
            },
            {
                name: "王雪莲",
                weight: 1,
                num: 0
            },
            {
                name: "何芳",
                weight: 2,
                num: 0
            },
            {
                name: "赵欢",
                weight: 1,
                num: 0
            },
            {
                name: "张元丽",
                weight: 1,
                num: 0
            },
        ]

        let Item = {
            props: ["data", "index"],
            template: `
                    <li>
                        {{index+1}} 姓名： {{data.name}} 权重：{{data.weight}} 次数：{{data.num}}
                    </li>`,
            mounted() {
                console.log('mounted....',this.index)
            },
        }
        new Vue({
            el: "#app",
            data: {
                name: "🙈",
                start: false,
                timer: null,
                users: students,
                historyUsers: []
            },
            components: {
                Item
            },
            created() {
                if (localStorage.getItem('history-user')) {
                    this.historyUsers = JSON.parse(localStorage.getItem('history-user'))
                }
            },
            computed: {
                history() {
                    return this.historyUsers.sort((a, b) => b.num - a.num)
                }
            },
            methods: {
                guess() {

                    if (!this.start) {
                        this.timer = setInterval(() => {
                            let i = Math.floor(Math.random() * this.users.length)
                            this.name = this.users[i].name
                        }, 50)

                        this.start = true;
                    } else {

                        clearInterval(this.timer)

                        // 随机权重
                        let randWeigth = Math.ceil(Math.random() * 5)
                        // console.log('随机权重:', randWeigth)
                        // 根据随机权重，找到在权重范围内的元素，作为目标数组1
                        let targetArr = this.users.filter(user => user.weight >= randWeigth)

                        // 在目标数组汇总找到次数最少的目标数组2
                        let targetArr2 = [];
                        //找到平均数
                        let count = 0;
                        targetArr.forEach(u => {
                            count += u.num
                        })
                        let ava = count / targetArr.length;

                        //找到小于平均数的元素
                        targetArr2 = targetArr.filter(u => u.num <= ava)


                        // 在目标数组2中，随机找到目标元素
                        let randIndex = Math.floor(Math.random() * targetArr2.length);
                        this.name = targetArr2[randIndex].name

                        let i = this.historyUsers.findIndex(user => user.name === this.name)
                        if (i !== -1) {
                            this.historyUsers[i].num++
                        } else {
                            targetArr2[randIndex].num = 1;
                            this.historyUsers.push(targetArr2[randIndex])

                        }

                        localStorage.setItem('history-user', JSON.stringify(this.historyUsers))
                        this.start = false;
                    }

                }
            },
        })
    </script>
</body>

</html>